<template>
    <div>
        <!--查询表单-->
        <div class="search-div" style="margin-bottom: 10px;">
            <el-form label-width="70px" size="small">
                <el-row>

                    <el-col :span="8">
                        <el-form-item label="审核类型">
                            <el-input style="width: 95%" v-model="searchObj.status"></el-input>
                        </el-form-item>
                    </el-col>

                </el-row>
                <el-row style="display:flex">
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="fetchData()">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetData">重置</el-button>
                </el-row>
            </el-form>
        </div>

        <!-- 工具条 -->
        <div class="tools-div">
            <el-button type="success" icon="el-icon-plus" size="mini" @click="add()">新增</el-button>
            <el-button type="warning" plain icon="el-icon-upload2" size="mini" :disabled="!startAudit"
                @click="start()">发起审核</el-button>
        </div>
        <!-- 添加请假条 -->
        <el-dialog title="添加" :visible.sync="dialogVisible" width="40%">
            <el-form ref="dataForm" :rules="rules" :model="form" label-width="150px" size="small"
                style="padding-right: 40px">
                <el-form-item label="请假人" prop="userId">
                    <el-select v-model="form.userId" placeholder="请选择请假人">
                        <el-option v-for="item in userList" :key="item.id" :label="item.username" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="请假天数" prop="day">
                    <el-input v-model="form.day"></el-input>
                </el-form-item>
                <el-form-item label="请选择请假时间">
                    <el-date-picker v-model="oaTimes" type="datetimerange" range-separator="至" start-placeholder="开始时间"
                        end-placeholder="结束时间" value-format="yyyy-MM-dd HH:mm:ss" style="margin-right: 10px;width: 100%;" />
                </el-form-item>
                <el-form-item label="请假原因" prop="userInfo">
                    <el-input type="textarea" v-model="form.userInfo"></el-input>
                </el-form-item>



            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel()" size="small" icon="el-icon-refresh-right">取 消</el-button>
                <el-button type="primary" icon="el-icon-check" @click="submit()" size="small">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 发起审核 -->
        <el-dialog :title="auditInfo.title" :visible.sync="auditInfo.open" width="40%">
            <el-form ref="dataForm" :rules="auditInfo.rules" :model="auditInfo.form" label-width="150px" size="small"
                style="padding-right: 40px">
                <el-form-item v-show="false" label="请假条id" prop="id">
                    <el-input v-model="auditInfo.form.excuse.id" readonly></el-input>
                </el-form-item>
                <el-form-item label="请假人" prop="username">
                    <el-input v-model="auditInfo.form.excuse.username" readonly></el-input>
                </el-form-item>
                <el-form-item label="请假天数" prop="day">
                    <el-input v-model="auditInfo.form.excuse.day" readonly></el-input>
                </el-form-item>
                <el-form-item label="开始时间" prop="startTime">
                    <el-input v-model="auditInfo.form.excuse.startTime" readonly></el-input>
                </el-form-item>
                <el-form-item label="结束时间" prop="endTime">
                    <el-input v-model="auditInfo.form.excuse.endTime" readonly></el-input>
                </el-form-item>
                <el-form-item label="审核人（人事）" prop="giftId">
                    <el-select v-model="auditInfo.form.gift.userId">
                        <el-option v-for="user in auditInfo.form.gift" :key="user.id" :label="user.username"
                            :value="user.id" />
                    </el-select>
                </el-form-item>
                <el-form-item prop="adminId" v-show="auditInfo.form.excuse.day >= auditInfo.form.definitionDay"
                    label="(二次审核人)管理员" >
                    <el-select v-model="auditInfo.form.admins.userId">
                        <el-option v-for="user in auditInfo.form.admins" :key="user.id" :label="user.username"
                            :value="user.id" />
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel()" size="small" icon="el-icon-refresh-right">取 消</el-button>
                <el-button type="primary" icon="el-icon-check" @click="handleStartAudit()" size="small">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 表格 -->
        <el-table v-loading="listLoading" @selection-change="handleSelectionChange" :data="list" stripe border
            style="width: 100%; margin-top: 10px">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="序号" width="70" align="center">
                <template slot-scope="scope">
                    {{ (page - 1) * limit + scope.$index + 1 }}
                </template>
            </el-table-column>
            <el-table-column prop="username" label="请假人名称" />
            <el-table-column prop="day" label="请假天数" />
            <el-table-column prop="startTime" label="开始时间" />
            <el-table-column prop="endTime" label="结束时间" />
            <el-table-column prop="userInfo" label="请假原因" show-overflow-tooltip />
            <el-table-column prop="status" label="状态" width="160" :formatter="cidformatter" />
            <el-table-column prop="createTime" label="创建时间" />


        </el-table>

        <!-- 分页组件 -->
        <el-pagination :current-page="page" :total="total" :page-size="limit" style="padding: 30px 0; text-align: center"
            layout="total, prev, pager, next, jumper" @current-change="fetchPageList" />


        <el-dialog :title="bpmnImage.title" :visible.sync="bpmnImage.open" width="80%" top="Svh" append-to-body
            class="scrollbar">
            <img :src="bpmnImage.data">
        </el-dialog>
    </div>
</template>
  
<script>
// 导入
import api from "@/api/excuse/excuse.js";
import uapi from "@/api/user/user.js";


const defaultForm = {
    id: '',
    userId: '',
    day: '',
    startTime: '',
    endTime: '',
    username: '',
    userInfo: '',
    status: '',
    instanceId: '',
    info: '',

}
export default {
    data() {
        return {
            list: [],
            page: 1,
            limit: 5,
            total: 0,
            searchObj: {},
            listLoading: false,
            dialogVisible: false,
  
            auditInfo: {
                title: '发起审核',
                form: {
                    admins: [],
                    excuse: defaultForm,
                    definitionDay: '',
                    gift: []
                },
                open: false,
                rules: {}
            },
            // 当前选中的对象
            current: {},
            // 用户集合 -- 
            userList: {},
            createTimes: [],
            oaTimes: [],
            // 选中数组
            ids: [],
            // 是否允许开始审核
            startAudit: false,
            statusList: [
                { status: 0, name: "初始化" },
                { status: 1, name: "审核中" },
                { status: 2, name: "已拒绝" },
                { status: 3, name: "已批准" }
            ],

            //审批进度图
            bpmnImage: {
                title: '审批进度图',
                open: false,
                data: null
            },

            //表单参数
            form: defaultForm,
            //表单效验
            rules: {
                // bpmnType: [
                //     { required: true, message: '请选择审核类型', trigger: 'change' }
                // ],
                // info: [
                //     { required: true, message: '请输入备注信息', trigger: 'blur' }
                // ]
            },
        };
    },
    created() {
        //this.listLoading=true;
        this.fetchPageList();
        this.findAll();

    },
    methods: {
        // 发起审核提交按钮
        handleStartAudit() {
            let { form } = this.auditInfo;
            console.log("form.excuse.id: ", form.excuse.id)
            console.log("form.giftId: ", form.gift.userId)
            console.log("form.adminId: ", form.admins.userId)
            console.log("form.info: ", form.info)
            let param = {
                excuseId: form.excuse.id,
                giftId: form.gift.userId,
                adminId: form.admins.userId,
                info: form.info
            }
            api.startAudit(param).then(() => {
                // 刷新表格
                this.fetchData();
                // 关闭弹窗
                this.auditInfo.open = false
            })
        },

        cidformatter(row) {
            let item = this.statusList.find(item => item.status === row.status);
            return item ? item.name : null;
        },

        findAll() {
            uapi.findAll().then(resp => {
                this.userList = resp.data
            })
        },
        start() {
            api.getAuditInfo(this.current.id).then(resp => {

                this.auditInfo.open = true;
                console.log(this.auditInfo.open)
                this.auditInfo.form = resp.data;
                console.log("发起审批数据： ", this.auditInfo.form)
            })

        },

        handleSelectionChange(selection) {
            // 如果没选||选中元素大于1个，都不允许发起审核

            if (selection.length !== 1 || selection[0].status !== 0) {
                this.startAudit = false;
                this.current = {}
                return
            }
            this.startAudit = true
            this.current = selection[0]
        },





        submit() {
            // 触发表单验证
            this.$refs.dataForm.validate((valid) => {
                if (this.oaTimes && this.oaTimes.length == 2) {
                    this.form.startTime = this.oaTimes[0];
                    this.form.endTime = this.oaTimes[1];
                }
                if (valid) {
                    api.add(this.form).then(() => {
                        this.$message({
                            type: "success",
                            message: "添加成功!",
                        });
                        this.fetchPageList();
                    })
                    this.cancel();
                } else {
                    // 表单验证未通过，提示用户
                    return false;
                }
            });
        },
        add() {
            this.dialogVisible = true;
            this.form = {}
        },

        handleImage(row) {
            // 
            console.log("进入获取流程图的方法")
            const type = "image";
            api.getById(row.id, type).then(resp => {
                console.log("流程图：", resp)
                this.bpmnImage.data = resp.data;
            })

            this.bpmnImage.open = true;
        },
        removeDataById(id) {
            this.$confirm("是否撤销?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                api.removeById(id).then((response) => {
                    this.$message({
                        type: "success",
                        message: "删除成功!",
                    });
                    this.fetchPageList();
                });
            });
        },
        // 取消按钮
        cancel() {
            this.dialogVisible = false;
            this.auditInfo.form = {};
            this.auditInfo.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                bpmnType: null,
                info: null
            };
            this.fileList = [];
            this.resetForm("form");
        },

        resetData() {
            //1.清空搜索条件
            this.searchObj = {};
            //2.再次刷新列表
            this.fetchPageList();
        },
        fetchPageList(page = 1) {
            this.page = page;
            if (this.createTimes && this.createTimes.length == 2) {
                this.searchObj.createTimeBegin = this.createTimes[0];
                this.searchObj.createTimeEnd = this.createTimes[1];
            }
            api
                .getPageInfo(this.page, this.limit, this.searchObj)
                .then((response) => {
                    // this.listLoading=false;
                    console.log("列表: ", response.data.records);
                    this.list = response.data.records;
                    this.total = response.data.total;
                });
        },
    },
};
</script>
  
<style lang="less" scoped></style>